.notification-bg {
    position: absolute;
    z-index: 9999;
    right: 0;
}
@keyframes notificationShow {
    0% {
        opacity: 0;
        transform: translateY(0)
    }
    50% {
        opacity: 0;
        transform: translateY(8px)
    }
    100% {
        opacity: 1;
        transform: translateY(12px)
    }
}
@keyframes notificationHide {
    0% {
      opacity: 1;
    }

    80% {
      opacity: 0;
      transform: translateY(-1px)
    }

    100% {
      height: 0;
      opacity: 0;
      padding: 0;
      margin: 0;
      transform: translateY(-2px)
    }
  }
.notification-item {
   min-width: 288px;
   max-width: 400px;
   border: 1px solid transparent;
   border-radius: 4px;
   margin-bottom: 10px;
   box-shadow: 0 0 21px 0 rgba(0,0,0, 0.35);
   padding: 18px 24px 18px 20px;
   font-size: 14px;
   line-height: 26px;
   user-select: none;
   box-sizing: border-box;
   transition: all 1s;
   animation: notificationShow 0.3s both ease;
   color: #fff;

   & i {
      cursor: pointer;
      float: right;
      margin-top: 5px;
   }
}
.will-close {
  animation: notificationHide .2s both ease-in-out;
}

.notification-item-success {
    background-color: #61b26c;
  }

  .notification-item-warning {
    background-color: #f89e35;
  }

  .notification-item-info {
    background-color: #a085bb;
  }

  .notification-item-error {
    background-color: #f16464;
  }
//   .notificationShow-enter-active, .notificationShow-leave-active {
//      transition: all 0.3s;
//      transform: translateY(2px)
//   }
//   .notificationShow-enter, .notificationShow-leave-to {
//     opacity: 0;
//     transform: translateY(-5px);
//   }
